<template>
    <view class="signList">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            safe-area-inset-bottom
            bg-color="#FFF"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
            auto-scroll-to-top-when-reload
            v-model="dataList"
            @query="queryList"
        >
            <view class="top flex_wrap flex_column">
                <view class="flex_wrap row_middle pepole">
                    <u--image
                        :src="
                            userDetails.avatar ||
                            `/static/img/conference/MissingAvatar.png`
                        "
                        shape="circle"
                        width="80"
                        height="80"
                    ></u--image>
                    <view style="width: 36rpx"></view>
                    <view class="flex_wrap flex_column left">
                        <view
                            ><u--text
                                :text="
                                    userDetails.latestSignInNotes ||
                                    userDetails.nickName ||
                                    '微信用户'
                                "
                                color="#FFF"
                                size="40rpx"
                        /></view>
                        <view
                            ><u--text
                                :text="userDetails.customerPhone"
                                color="#FFF"
                                size="28rpx"
                                bold
                        /></view>
                    </view>
                </view>
                <view
                    style="
                        margin-top: 20rpx;
                        margin-left: 80rpx;
                        box-sizing: border-box;
                        width: 400rpx;
                    "
                    class="flex_wrap row_middle"
                >
                    <u-text
                        text="编辑备注"
                        size="28rpx"
                        color="#fff"
                        prefixIcon="edit-pen"
                        iconStyle="fontSize:48rpx;color:#fff"
                        @click="
                            showEditModal = true;
                            editForm.info = userDetails.latestSignInNotes;
                        "
                        style="display: inline-block"
                    />
                    <u-rate
                        :count="5"
                        :value="customerStar"
                        activeColor="#FFAA00"
                        @change="starChange"
                    ></u-rate>
                </view>
                <view> </view>
            </view>

            <view class="scrollViews">
                <u-cell-group
                    :border="false"
                    :customStyle="{ padding: '0 20rpx' }"
                >
                    <u-cell
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/03/12/d651a5b8bd7744d498c65b86e92c9ab0.png"
                    >
                        <view slot="title" class="u-slot-title">
                            <view
                                class="u-page__tag-item"
                                v-for="(item, index) in radios"
                                :key="index"
                            >
                                <u-tag
                                    :text="`${item.tag}`"
                                    :plain="!item.checked"
                                    :name="index"
                                    @click="radioClick"
                                    borderColor="#588BF3"
                                    :color="item.checked ? '#fff' : '#588BF3'"
                                    :closable="item.checked"
                                    @close="deleteFun(index)"
                                >
                                </u-tag>
                            </view>

                            <u-tag
                                borderColor="#777"
                                color="#777"
                                closeColor="#777"
                                text="+添加标签"
                                plain
                                @click="openShow"
                                v-if="this.radios.length < 5"
                            >
                            </u-tag>
                        </view>
                    </u-cell>
                    <u-cell
                        title="记事本"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon6.png"
                        :url="`/pages_my/user_manage/keepBook/index?id=${userDetails.customerId}`"
                    ></u-cell>
                    <u-cell
                        title="健康档案"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon1.png"
                        :url="`/pages_my/health_records/index?customerPhone=${userDetails.customerPhone}`"
                    ></u-cell>
                    <!-- <u-cell
                        title="领取记录"
                        icon="/static/img/myUserManage/icon2.png"
                        isLink
                        size="mini"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        titleStyle="font-size: 32rpx;color: #333333;"
                        :url="
                            '/pages_my/user_manage/receiveList/index?customerId=' +
                            userDetails.customerId +
                            '&customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName
                        "
                    ></u-cell> -->
                    <!-- :url="`/pages_my/user_manage/receiveList/index?customerId=${userDetails.customerId}+customerPhone=${userDetails.customerPhone}`" -->
                    <u-cell
                        title="购买记录"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        icon="/static/img/myUserManage/icon3.png"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        :url="
                            '/pages_my/user_manage/purchaseList/index?customerId=' +
                            userDetails.customerId +
                            '&customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName
                        "
                    ></u-cell>
                    <u-cell
                        title="会议记录"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon4.png"
                        :url="
                            '/pages_my/user_manage/meetList/index?customerId=' +
                            userDetails.customerId +
                            '&customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName
                        "
                    ></u-cell>
                    <u-cell
                        title="客服记录"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon5.png"
                        :url="
                            '/pages_my/user_manage/serviceList/index?customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName
                        "
                    ></u-cell>

                    <u-cell
                        title="福鸡记录"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon7.png"
                        :url="
                            '/pages_my/user_manage/chickenList/index?customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName
                        "
                    ></u-cell>
                    <u-cell
                        title="权益卡记录"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/iocn8.png"
                        :url="
                            '/pages_my/user_manage/cardList/index?customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName
                        "
                    ></u-cell>
                    <u-cell
                        title="服务项目"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon9.png"
                        :url="
                            '/pages_my/service_usage/index?customerPhone=' +
                            userDetails.customerPhone+
                            '&customerId=' +
                            userDetails.customerId
                        "
                    ></u-cell>
                    <u-cell
                        v-if="showBalance"
                        title="我的余额"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="/static/img/myUserManage/icon10.png"
                        :url="
                            '/pages_my/user_manage/balance/index?customerPhone=' +
                            userDetails.customerPhone +
                            '&avatar=' +
                            userDetails.avatar +
                            '&nickName=' +
                            userDetails.nickName +
                            '&balance=' +
                            balance +
                            '&customerId=' +
                            userDetails.customerId +
                            '&lineOfCredit=' +
                            lineOfCredit
                        "
                    ></u-cell>
                    <u-cell
                        title="保单"
                        size="mini"
                        isLink
                        titleStyle="font-size: 32rpx;color: #333333;"
                        iconStyle="width:60rpx;height:60rpx;margin-right:16rpx"
                        icon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/06/13/cf3b2039798b4956839e1a9902006dbb.png"
                        :url="
                            '/pages_my/user_manage/policy/index?customerId=' +
                            userDetails.customerId
                        "
                    ></u-cell>
                </u-cell-group>
                <u-modal
                    :show="showEditModal"
                    ref="editModal"
                    title="修改备注"
                    showCancelButton
                    @confirm="confirmEdit"
                    @cancel="cancelEdit"
                >
                    <view slot="default" style="width: 100%">
                        <u--form
                            ref="editForm"
                            labelPosition="left"
                            :model="editForm"
                            labelWidth="0"
                        >
                            <u-form-item prop="info" borderBottom ref="item">
                                <u-input
                                    v-model="editForm.info"
                                    border="none"
                                    placeholder="请输入客户姓名"
                                    :customStyle="{ paddingLeft: '20rpx' }"
                                    clearable
                                />
                            </u-form-item>
                        </u--form>
                    </view>
                </u-modal>
                <u-modal
                    :show="nameShow"
                    showCancelButton
                    title="标签名称"
                    @confirm="nameConfirm"
                    @cancel="
                        () => {
                            nameShow = false;
                            tagName = '';
                        }
                    "
                >
                    <view style="width: 560rpx; margin: 0 auto">
                        <u-textarea
                            ref="textarea"
                            height="80rpx"
                            v-model="tagName"
                            :customStyle="textAreaCustomStyle"
                            placeholder="请输入标签"
                            fixed
                        ></u-textarea>
                        <view
                            style="
                                margin-top: 20rpx;
                                width: 560rpx;
                                display: flex;
                                flex-wrap: wrap;
                            "
                        >
                            <view
                                class="u-page__tag-item"
                                v-for="(item, index) in radios1"
                                :key="index"
                            >
                                <u-tag
                                    :text="`${item}`"
                                    plain
                                    :name="index"
                                    @click="radioClick1"
                                    borderColor="#777777"
                                    color="#777777"
                                >
                                </u-tag>
                            </view>
                        </view>
                    </view>
                </u-modal>
            </view>
        </z-paging>
    </view>
</template>

<script>
import {
    updateCustomerManger,
    updateCustomerStarByManageId,
} from "@/api/salesmanMeeting.js";
import {
    updateCustomerManage,
    getCustomerManageInfo,
    getCustomerManageTagList,
} from "@/api/login.js";
import { baseUrl } from "@/config/tendIdConfig";

export default {
    data() {
        return {
            userDetails: {},
            showEditModal: false,
            customerStar: 0,
            editForm: { info: "" },
            customerId: "",
            showBalance: false,
            balance: "",
            lineOfCredit: "",
            textAreaCustomStyle: {
                backgroundColor: "#EDEDED",
                color: "#666",
                width: "100%",
                padding: "20rpx",
                paddingBottom: "40rpx",
                boxSizing: "border-box",
                fontSize: "26rpx",
            },
            nameShow: false,
            tagName: "",
            radios: [],
            radios1: [],
        };
    },
    onReady() {
        // this.$refs.textarea.setFormatter(this.formatter);
    },
    onLoad(options) {
        this.userDetails = options?.data && JSON.parse(options?.data);
        this.customerStar = this.userDetails?.customerStar || 0;
        this.getPrice();
        getCustomerManageInfo({
            salesmanId: this.$store.getters?.userInfo.id,
            customerId: this.userDetails.customerId,
        }).then((res) => {
            if (res.code === 200) {
                const { tag = [] } = res.data;
                this.radios = !tag
                    ? []
                    : tag.split(",").map((v) => ({ checked: false, tag: v }));
                console.log("4444444", this.radios);
            }
        });
    },

    methods: {
        formatter(value) {
            if (value.length > 5) {
                return value.slice(0, 5);
            } else {
                return value;
            }
        },
        async openShow() {
            this.nameShow = true;
            const { data } = await getCustomerManageTagList({});
            this.radios1 = data;
        },
        nameConfirm() {
            console.log("object :>> ", this.tagName.trim());
            if (!this.tagName.trim()) return uni.$u.toast("请输入标签！");
            if (this.tagName.trim() && this.tagName.length > 5)
                return uni.$u.toast("标签最多输入5个长度！");
            this.nameShow = false;
            const tagList = [
                ...this.radios,
                { checked: false, tag: this.tagName },
            ];
            const tag = tagList.map((v) => v.tag).toString();
            updateCustomerManage({
                tag,
                salesmanId: this.$store.getters?.userInfo.id,
                customerId: this.userDetails.customerId,
            }).then((res) => {
                if (res.code === 200) {
                    this.radios = tagList;
                    this.tagName = "";
                    this.nameShow = false;
                    console.log("object :>> 2222", this.tagName.trim());
                }
            });
        },
        deleteFun(i) {
            const tagList = uni.$u.deepClone(this.radios);
            tagList.splice(i, 1);
            const tag = tagList.map((v) => v.tag).toString();
            console.log(tagList, "object :>> ", tag);
            updateCustomerManage({
                tag,
                salesmanId: this.$store.getters?.userInfo.id,
                customerId: this.userDetails.customerId,
            }).then((res) => {
                if (res.code === 200) {
                    this.radios.splice(i, 1);
                }
            });
        },
        radioClick(name) {
            this.radios.map((item, index) => {
                item.checked = index === name ? true : false;
            });
        },
        radioClick1(name) {
            this.tagName = this.radios1[name];
        },
        getPrice() {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url:
                    baseUrl +
                    `/customer/customer/getCustomerByCustomerId/${that.userDetails.customerId}`,
                method: "GET",
                header: {
                    Authorization: token,
                },
                success(res) {
                    if ([991, 992, 401].includes(res.data.code)) {
                        uni.$u.toast(res.data.msg);
                        that.$store.commit("SET_LOGOUT");
                        uni.redirectTo({
                            url: "/pages/user/phone/indexApp",
                        });
                        return;
                    }
                    if (res.data.code === 200) {
                        that.balance = res.data.data.balance;
                        that.lineOfCredit = res.data.data.lineOfCredit;
                        if (that.lineOfCredit !== 0 && that.balance !== 0) {
                            that.showBalance = true;
                        }
                    }
                },
            });
        },
        cancelEdit() {
            this.$refs.editForm.resetFields();
            this.$refs.editForm.clearValidate();
            this.editForm.info = "";
            this.showEditModal = false;
        },
        async confirmEdit() {
            const that = this;
            const params = {
                id: this.userDetails.id,
                note: that.editForm.info,
            };
            let res = await updateCustomerManger(params);
            this.userDetails.latestSignInNotes = that.editForm.info;
            await uni.$u.toast("更新成功");
            await that.cancelEdit();
        },
        goToList(type, item) {
            uni.$u.route({
                url: "/pages_conferenceDetail/signList/index",
                params: {
                    type,
                    meetId: this.meetId,
                    salesmanId: item.id,
                },
            });
        },
        async queryList(pageNo, pageSize) {
            const params = {
                meetId: this.meetId,
                salesmanId: this.salesmanId,
                pageNum: pageNo,
                pageSize: pageSize,
            };
        },
        async starChange(e) {
            if (e === this.customerStar) return;
            const params = {
                id: this.userDetails.id,
                customerStar: e,
            };
            let res = await updateCustomerStarByManageId(params);
            await uni.$u.toast("更新成功");
            this.customerStar = e;
        },
        toAdvisor(e) {
            uni.navigateTo({
                url: "/pages_my/myCard/index?salesmanId=" + e.id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.signList {
    ::v-deep.u-line {
        height: auto !important;
    }
    position: relative;
}
.pepole {
    padding-left: 80rpx;
    padding-bottom: 10rpx;
    padding-top: 50rpx;
}
.top {
    height: 372rpx;
    width: 100%;
    box-sizing: border-box;
    background-image: url("@/static/img/conference/userDetailsbg.png");
    background-size: cover;
}
.search {
    padding: 30rpx 20rpx 30rpx 20rpx;
    background-color: #fff;
}
.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    border-radius: 60rpx 60rpx 0rpx 0rpx;
    background-color: #fff;
}
::v-deep .u-cell__title {
    flex: none !important;
}
.u-slot-title {
    display: flex;
    flex-wrap: wrap;
    max-width: 60vw;
}
.u-page__tag-item {
    margin-right: 20rpx;
    margin-bottom: 10rpx;
}
::v-deep .u-tag--primary {
    margin-top: 0 !important;
}
::v-deep .u-tag__close {
    top: 0 !important;
}
</style>
